<template>
	<view class="home">
		<custom-navbar title='政策库' :show-back="true" @back="handleBack" />

		<view class="content" :style="{ paddingTop: navBarHeight + 'px' }">
			<!-- 搜索区域 -->
			<view class="search-section p0030">
				<view class="search-box fcc mb30">
					<up-search shape="square" placeholder="请输入政策名称" v-model="policy_title" :showAction="false"
						@search="handleSearch" @clear="handleSearch"></up-search>
					<up-button @click="handleSearch" type="primary"
						style="width: 140rpx;height: 60rpx;background: #398DFB;border-radius: 10rpx;"
						text="搜索"></up-button>
				</view>
				<view class="category-tabs flex">
					<view v-for='(item,index) in policyCategories' class="tab-item fcolcc mr30" :key="item.value">
						<view class="tab-label" :class="{ active: policy_category === item.value }"
							@click="switchCategory(item.value)">
							{{item.label}}
						</view>
						<view class="tab-indicator" :class="{ active: policy_category === item.value }"></view>
					</view>
				</view>
			</view>

			<!-- 内容区域 -->
			<view class="content-area">
				<!-- 空状态 -->
				<view v-if="isEmpty" class="empty-state fcolcc">
					<image class="empty-image" src="/static/images/common/empty.png"></image>
					<view class="empty-text">暂无相关政策数据</view>
					<up-button type="primary" shape="circle" @click="resetSearch"
						style="width: 200rpx;margin-top: 30rpx;">
						重新加载
					</up-button>
				</view>

				<!-- 政策列表 -->
				<view v-else class="policy-list p2430">
					<view class="notice-banner mb20">
						<image class="banner-image" :src="cdn('noticeBg.jpg')" mode="widthFix"></image>
					</view>
					<view class="list-container p30">
						<view class="policy-item" v-for="(item,index) in noticeList" :key="index"
							@click="goToDetails(item)">
							<view class="item-content fcsb">
								<view class="item-info">
									<view class="policy-title mb50">{{item.policy_title}}</view>
									<view class="publish-date">{{item.create_time}}</view>
								</view>
								<view class="item-image-wrapper">
									<image class="policy-image" :src="item.policy_image" mode="aspectFill"></image>
									<image v-if='item.is_top == 1' class="top-icon"
										src="/static/images/Industry/置顶.svg"></image>
								</view>
							</view>
							<up-line margin='40rpx 0'></up-line>
						</view>
					</view>

					<!-- 加载更多 -->
					<view v-if="isLoadingMore" class="loading-more fcc">
						<up-loading-icon text='加载中...'></up-loading-icon>

					</view>
					<view v-if="noMoreData" class="no-more fcc">
						没有更多数据了
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import CustomNavbar from '@/components/custom-navbar.vue'

	import {
		ref,
		computed,
		onMounted
	} from 'vue';
	import {
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		PolicyLists
	} from '@/api/policy'
	import {
		getClassification
	} from '@/api/login'

	// 系统信息
	const systemInfo = uni.getSystemInfoSync()
	const navBarHeight = computed(() => systemInfo.statusBarHeight + 44)

	// 数据状态
	const isLoading = ref(false)
	const isLoadingMore = ref(false)
	const noMoreData = ref(false)
	const isEmpty = ref(false)

	// 搜索参数
	const policy_title = ref('')
	const policy_module = ref(2)
	const policy_category = ref('')
	const policyCategories = ref([])

	// 分页参数
	const page = ref(1)
	const limit = ref(10)
	const total = ref(0)

	// 政策列表
	const noticeList = ref([])

	// 初始化加载
	onMounted(() => {
		loadPolicyCategories()
	})

	// 加载政策分类
	const loadPolicyCategories = async () => {
		try {
			const res = await getClassification(2)
			policyCategories.value = res.data
			if (policyCategories.value.length > 0) {
				policy_category.value = policyCategories.value[0].value
				loadPolicyList(true)
			}
		} catch (error) {
			console.error('加载政策分类失败:', error)
			uni.showToast({
				title: '加载分类失败',
				icon: 'none'
			})
		}
	}

	// 加载政策列表
	const loadPolicyList = async (isRefresh = false) => {
		if (isLoading.value && !isRefresh) return

		try {
			if (isRefresh) {
				page.value = 1
				noMoreData.value = false
				isLoading.value = true
			} else {
				isLoadingMore.value = true
			}

			const params = {
				lang_code: 'zh',
				limit: limit.value,
				page: page.value,
				policy_module: policy_module.value,
				policy_category: policy_category.value,
				policy_title: policy_title.value
			}

			const res = await PolicyLists(params)

			if (res.code === 200) {
				if (isRefresh) {
					noticeList.value = res.data.data
					total.value = res.data.total
				} else {
					noticeList.value = [...noticeList.value, ...res.data.data]
				}

				// 检查是否还有更多数据
				if (res.data.data.length < limit.value) {
					noMoreData.value = true
				}

				// 检查空状态
				isEmpty.value = noticeList.value.length === 0
			}
		} catch (error) {
			console.error('加载政策列表失败:', error)
			uni.showToast({
				title: '加载失败，请重试',
				icon: 'none'
			})
		} finally {
			isLoading.value = false
			isLoadingMore.value = false
			// 停止下拉刷新
			uni.stopPullDownRefresh()
		}
	}

	// 切换分类
	const switchCategory = (category) => {
		if (policy_category.value === category) return
		policy_category.value = category
		loadPolicyList(true)
	}

	// 搜索处理
	const handleSearch = () => {
		loadPolicyList(true)
	}

	// 重置搜索
	const resetSearch = () => {
		policy_title.value = ''
		loadPolicyList(true)
	}

	// 加载更多
	onReachBottom(() => {
		if (isLoadingMore.value || noMoreData.value) return
		page.value += 1
		loadPolicyList()
	})

	// 查看详情
	const goToDetails = (item) => {
		uni.navigateTo({
			url: `/pages/policy/details?policy_id=${item.policy_id}`
		})
	}

	// 返回首页
	const handleBack = () => {
		uni.switchTab({
			url: '/pages/index/index'
		})
	}
</script>

<style lang="scss" scoped>
	.home {
		width: 100%;
		min-height: 100vh;
		background-color: #f7f7f7;

		.content {
			padding-top: var(--status-bar-height);
			padding-top: calc(var(--status-bar-height) + 70rpx);

			.search-section {
				background: #FFFFFF;

				.search-box {
					width: 100%;
					height: 90rpx;
					background: #F3F3F3;
					border-radius: 10rpx;
				}

				.category-tabs {
					overflow-x: auto;
					white-space: nowrap;
					padding-bottom: 10rpx;

					.tab-item {
						display: inline-flex;
						position: relative;

						.tab-label {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 30rpx;
							color: #666666;
							line-height: 54rpx;
							text-align: center;
							font-style: normal;
							text-transform: none;
							padding: 10rpx 0;

							&.active {
								color: #398DFB;
								font-weight: 500;
							}
						}

						.tab-indicator {
							width: 40rpx;
							height: 4rpx;
							border-radius: 500rpx;
							position: absolute;
							bottom: -10rpx;

							&.active {
								background: #398DFB;
							}
						}
					}
				}
			}

			.content-area {
				margin-top: 20rpx;

				.empty-state {
					height: 60vh;
					padding: 40rpx;
					text-align: center;

					.empty-image {
						width: 300rpx;
						height: 300rpx;
						margin-bottom: 30rpx;
					}

					.empty-text {
						font-size: 28rpx;
						color: #999;
					}
				}

				.policy-list {
					.notice-banner {
						border-radius: 12rpx;
						overflow: hidden;

						.banner-image {
							width: 100%;
							display: block;
						}
					}

					.list-container {
						background: #FFFFFF;
						border-radius: 20rpx;

						.policy-item {
							.item-content {
								.item-info {
									flex: 1;
									padding-right: 20rpx;

									.policy-title {
										font-family: PingFang SC, PingFang SC;
										font-weight: 600;
										font-size: 28rpx;
										color: #333333;
										text-align: left;
										font-style: normal;
										text-transform: none;

									}

									.publish-date {
										font-family: PingFang SC, PingFang SC;
										font-weight: 500;
										font-size: 24rpx;
										color: #999999;
										text-align: left;
										font-style: normal;
										text-transform: none;
									}
								}

								.item-image-wrapper {
									position: relative;
									width: 299rpx;
									height: 168rpx;
									border-radius: 8rpx;
									overflow: hidden;

									.policy-image {
										width: 100%;
										height: 100%;
									}

									.top-icon {
										position: absolute;
										width: 90rpx;
										height: 45rpx;
										right: 16rpx;
										top: 16rpx;
									}
								}
							}
						}
					}

					.loading-more,
					.no-more {
						padding: 30rpx 0;
						color: #999;
						font-size: 26rpx;

						.loading-text {
							margin-left: 15rpx;
						}
					}
				}
			}
		}
	}
</style>